<template>
	<view class="app" :class="{overhidden: list.length === 0}">
		
		<!-- 顶部筛选 分类栏 -->
		<view class="top" :style="{top: navigationBarHeight + statusBarHeight + 'px'}">
			<!-- 排序 -->
			<view class="sort-bar row">
				<view class="item row center" :class="{active: item.current, last: index === sortList.length-1}" v-for="(item,index) in sortList" :key="index" @click="changeSort(item)">
					<text>{{ item.name }}</text>
					<view v-if="item.isPrice" class="icon-wrap">
						<text class="mix-icon icon-down" :class="{active: item.type === 3}"></text>
						<text class="mix-icon icon-arrow-top" :class="{active: item.type === 4}"></text>
					</view>
				</view>
				<!-- #ifdef MP -->
				<!-- <view class="btn center">
					<text 
						class="mix-icon"
						:class="listType === 'column' ? 'icon-hengxiangliebiao' : 'icon-shuxiangliebiao'"
						@click="changeListType"
					></text>
				</view> -->
				<!-- #endif -->
			</view>
		</view>
		
		<!-- 赛事列表 -->
		<mescroll-body
			ref="mescrollRef" 
			@init="mescrollInit" 
			:top="headerHeight" 
			@down="downCallback" 
			:up="upOption" 
			@up="loadList" 
		>
			<game-list ref="gameList" :list="list" :listType="listType" :dataType="dataType" :param="param" ></game-list>
		</mescroll-body>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import gameList from './components/game-list'
	export default {
		components: {
			MescrollBody,
			gameList
		},
		mixins: [MescrollMixin], 
		data() {
			return {
				sourcePage: '', //来源页 主要用来判断是否来自搜索页
				listType: 'row', //列表类型 column竖向列表 row 横向列表
				param: '1=1',
				sortList: [
					// {name: '全部', type: 0, current: true},
					{name: '未开赛', type: 1, current: true},
					{name: '已开赛', type: 2, current: false},
					{name: '已结束', type: 3, current: false},
					{name: '已取消', type: -1, current: false},
				],
				list: [], //商品列表
				listPublish: [], //我的发布
				upOption:{
					auto: false, // 不自动加载
					page: {
					 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					 	size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				},
				dataType: 1,
			}
		},
		computed: {
			statusBarHeight(){
				// #ifdef MP-WEIXIN
				return 0;
				// #endif
				// #ifndef MP-WEIXIN
				return this.systemInfo.statusBarHeight
				// #endif
				// return 0;
			},
			navigationBarHeight(){
				// #ifdef MP-WEIXIN
				return 0;
				// #endif
				// #ifndef MP-WEIXIN
				return this.systemInfo.navigationBarHeight;
				// #endif
				// return 0;
			},
			headerHeight(){
				// #ifdef MP-WEIXIN
				return 96;
				// #endif
				// #ifndef MP-WEIXIN
				return 750 / uni.upx2px(750) * (this.navigationBarHeight + this.statusBarHeight) + 96;
				// #endif
				// return 96;
			},
		},
		onLoad(options) {
			// this.isLoading = true;
			// this.sourcePage = options.sourcePage || '';
			// this.prePage = options.prePage; //来源页 主要用于区分是否来自搜索页面
		},
		onShow() {
			this.loadList();
		},
		onReady() {
		},
		methods: {
			//加载产品列表
			async loadList(e){
				this.mescroll.removeEmpty();
				const {sortList} = this;
				var that = this;
				
				var type = sortList.filter(item=> item.current)[0].type;
				const data = {status:type}
				this.dataType = type;
				const res = await this.$post('MyGame', 'MyJoinGame', data);
				const curList = res.result;
				this.list = curList;
				this.mescroll.endSuccess(curList.length); //结束加载状态
			},
			
			mescrollInit(mescroll){
				this.mescroll = mescroll;
				setTimeout(()=>{
					this.refreshList();
				}, 10)
			},
			//刷新列表
			refreshList(){
				this.mescroll.resetUpScroll(false)
				// this.isLoading = true;
			},
			
			//排序
			changeSort(item){
				// console.log(JSON.stringify(item))
				// this.param = "type="+item.type;
				if(item.current){
					if(item.isPrice){
						item.type = item.type === 3 ? 4 : 3;
					}else{
						return;
					}
				}else{
					this.sortList.forEach(v=> v.current = false);
					item.current = true;
					if(item.type === 3 || item.type === 4){
						item.type = 3;
					}
				}
				this.refreshList();
			},
			//修改列表显示方式
			changeListType(){
				this.listType = this.listType === 'column' ? 'row' : 'column';
			}
		}
	}
</script>

<style>
	page{
		background-color: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	.app{
		/* #ifndef MP */
		&.overhidden{
			height: 100vh;
			overflow: hidden;
		}
		/* #endif */
	}
	/deep/ .mix-empty .default{
		padding-top: 38vh;
		/* #ifdef H5 */
		padding-top: 34vh;
		/* #endif */
	}
	.top{
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 95;
		background-color: #fff;
	}
	.sort-bar{
		justify-content: space-around;
		height: 76rpx;
		padding: 4rpx 0 4rpx 4rpx;
		/* #ifdef MP */
		padding-left: 10rpx;
		/* #endif */
		background-color: #fff;
		position: relative;
		z-index: 1;
		
		.item{
			flex: 1;
			height: 100%;
			font-size: 28rpx;
			color: #333;
			position: relative;
			overflow: hidden;
			
			&.active{
				color: $base-color;
				font-weight: 700;
				
				&:after{
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-28rpx);
					content: '';
					width: 56rpx;
					height: 4rpx;
					background-color: $base-color;
					border-radius: 10px;
				}
				.mix-icon.active{
					color: $base-color;
				}
			}
			/* #ifdef MP */
			&.last:before{
				content: '';
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 2rpx;
				height: 40rpx;
				box-shadow: 0 0 16rpx rgba(0,0,0,.6);
			}
			/* #endif */
		}
		.icon-wrap{
			display: flex;
			flex-direction: column;
			padding-left: 8rpx;
		}
		.mix-icon{
			font-size: 14rpx;
			color: #bbb;
		}
		.btn{
			height: 68rpx;
			padding-left: 16rpx;
			padding-right: 20rpx;
			
			.icon-hengxiangliebiao, .icon-shuxiangliebiao{
				font-size: 40rpx;
				color: #333;
			}
		}
	}
	.cate-bar:after{
		border-color: #f5f5f5;
	}
	.cate-wrap{
		flex-wrap: nowrap;
		height: 96rpx;
		padding-bottom: 4rpx;
		
		.fill-view{
			flex-shrink: 0;
			width: 20rpx;
			height: 20rpx;
			
			&:last-child{
				width: 10rpx;
			}
		}
		.item{
			flex-shrink: 0;
			height: 58rpx;
			padding: 0 28rpx;
			margin-right: 20rpx;
			font-size: 22rpx;
			color: #333;
			text-align: center;
			line-height: 58rpx;
			background-color: #f5f5f5;
			border-radius: 100px;
		}
		.active{
			color: $base-color;
			background-color: #fff8f4;
			font-weight: 700;
		}
	}
</style>
